<template>
    <div class="grid-box">
        <customBorder class="grid-item" title="Top10商品销量">
            <TopGoodsRank :data="salesVolume.topGoodData" :fields="salesVolume.fields" :top="10" :color="salesVolume.color" />
        </customBorder>
        <customBorder class="grid-item" title="Top10商品复购">
            <TopGoodsRank :data="repurchaseQuantity.topGoodData" :fields="repurchaseQuantity.fields" :top="10" :color="repurchaseQuantity.color" />
        </customBorder>
        <customBorder class="grid-item" title="商品贡献值排名">
            <TopGoodsRank :data="cValRank.topGoodData" :fields="cValRank.fields" :top="10" :color="cValRank.color" />
        </customBorder>
        <customBorder class="grid-item" title="商品数量">
            <TrendChart :x-data="trendData.dateList" :series="trendData.series" />
        </customBorder>
        <customBorder class="grid-item" title="新增商品信息">
            <RealtimeOrderList :columns="columns" :fetch-page="fetchOrderPage" :realtime-factory="realtimeFactory" />
        </customBorder>
        <customBorder class="grid-item" title="商品分类">
            <GradientBarZoom :x-data="prodCategory.xData" :y-data="prodCategory.yData" :colors="prodCategory.colors" :zoom-size="3" @clickBar="handleProductCategory" />
        </customBorder>
        <customBorder class="grid-item" title="商品地区">
            <PieChart :data="pieData" :config="(pieConfig as PieConfig)" ref="pieRef"></PieChart>
        </customBorder>
        <customBorder class="grid-item" title=""></customBorder>
        <customBorder class="grid-item" title=""></customBorder>
    </div>
</template>

<script lang="ts" setup>
import TopGoodsRank from "@/components/custom/TopGoodsRank.vue";
import TrendChart from "@/components/custom/TrendChart.vue";
import GradientBarZoom from "@/components/custom/GradientBarZoom.vue";
import PieChart, { PieConfig } from "@/components/custom/PieChart.vue";
import RealtimeOrderList from "@/components/RealtimeOrderList.vue";
import { useRepurchaseQuantity, useSalesVolume, useContributeValRank, useTrendData, useAddedProduct, useProductArea, useProductCategory } from "./hooks";

const salesVolume = useSalesVolume();
const repurchaseQuantity = useRepurchaseQuantity();
const cValRank = useContributeValRank();
const trendData = useTrendData();
const { columns, fetchOrderPage, realtimeFactory } = useAddedProduct();
const { pieData, pieConfig } = useProductArea();
const prodCategory = useProductCategory();
// 点击柱状分类图
const handleProductCategory = (el: any) => {};
</script>
<style lang="scss" scoped>
/* —— 变量区 —— */
$gap: 10px; // 你想要的边距
$cols: 3; // 3×3 九宫格

/* —— 九宫格容器 —— */
.grid-box {
    display: grid;
    grid-template-columns: repeat($cols, 1fr); // 三列，每列 1fr
    grid-template-rows: repeat($cols, 1fr);
    gap: $gap; // 行列间距都是 20px
    padding: $gap; // 容器四周再留 20px 边距
    box-sizing: border-box; // padding 算在宽高内
    height: calc(100% - 64px);
    position: relative;
    top: -10px;
}

/* —— 每个格子 —— */
.grid-item {
    background: transparent;
    border-radius: 6px;
    // aspect-ratio: 1 / 1; // 正方形
    display: flex;
    color: #fff;
    align-items: stretch; /* 确保子元素拉伸以填充整个单元格 */
}
.full-height {
    height: 100%;
}
</style>
